<template>
  <page-dialog
    :title="dialogInfo.title"
    v-model:visible="shows"
    :width="dialogInfo.width"
    :bt-loading="dialogInfo.btLoading"
    :bt-list="dialogInfo.btList"
  >
    <DialogTable
      ref="rightTableInfoRef"
      v-model:data="tableInfo.data"
      :reserve-selection="true"
      :listen-height="false"
      :pager="false"
      :checkBox="false"
      :field-list="tableInfo.fieldList"
      :handle="tableInfo.handle"
    >
      <template v-slot:col-storeBatchNumber="scope">
        <StoreBatchNumberTag :row="scope.row" />
      </template>
    </DialogTable>
  </page-dialog>
</template>

<script setup name="IndividualDetails">
import { getCustomizeSetting } from '@/api/customize'
import { getConsumeOrderDetailCustomizeListAll } from '@/api/wms'
import StoreBatchNumberTag from '../components/StoreBatchNumberTag'

const { proxy } = getCurrentInstance()
const emit = defineEmits()
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: function () {
      return false
    },
  },
  info: {
    type: Object,
    default: function () {
      return {}
    },
  },
  tableKey: {
    type: String,
    default:
      'selectProductStockTransferOrderDeatilIndividual-com.slip.spd.entity.vo.wms.WmsTransferOrderVO',
  },
  orderId: {
    type: String,
    default: '',
  },
  api: {
    type: Function,
    default: getConsumeOrderDetailCustomizeListAll,
  },
  isConsignBusiness: {
    type: String,
    default: '',
  },
  ids: {
    type: String,
    default: '',
  },
})

// 表格相关
const tableInfo = ref({
  data: [],
  fieldList: [],
  selections: [],
})
const filterInfo = ref({
  query: {
    queryMap: {
      isConsignBusiness: {
        queryType: 'EQUALS',
        queryCategory: 'AND',
        value: '',
      },
      id: {
        queryType: 'IN',
        queryCategory: 'AND',
        value: null,
      },
      orderId: {
        queryType: 'EQUALS',
        queryCategory: 'AND',
        value: null,
      },
    },
    queryParams: {},
    customizeUserVO: {},
  },
})
// 弹窗相关
const dialogInfo = ref({
  title: '个体详情',
  width: '90%',
  btLoading: false,
  btList: [{ label: '关闭', event: handleClose, show: true }],
})

const shows = computed({
  get() {
    return props.showDialog
  },
  set(newValue) {
    emit('update:showDialog', newValue) // 更新父组件shows
  },
})

let obj = {
  price: {
    label: '单价',
    value: 'price',
    type: 'column',
    componentType: 'price',
    permission: !props.showPrice,
    formatter: proxy.$fn.TripartiteMethod,
    show: false,
    hidden: true,
  },
  sumAmount: {
    label: '总金额',
    value: 'sumAmount',
    type: 'column',
    componentType: 'price',
    permission: !props.showPrice,
    formatter: proxy.$fn.TripartiteMethod,
    show: false,
    hidden: true,
  },
  showPrice: {
    label: '展示价格',
    value: 'showPrice',
    type: 'column',
    componentType: 'price',
    permission: !props.showPrice,
    formatter: proxy.$fn.TripartiteMethod,
    show: false,
    hidden: true,
  },
  defaultSupplierPrice: {
    label: '默认供应商价格',
    value: 'defaultSupplierPrice',
    permission: !props.showPrice,
    componentType: 'price',
    type: 'column',
    formatter: proxy.$fn.TripartiteMethod,
    show: false,
    hidden: true,
  },
  commonName: {
    label: '通用名称',
    value: 'commonName',
    componentType: 'input',
    show: false,
    hidden: true,
  },
}
tableInfo.value.fieldList = Object.values({
  ...proxy.$fn.deepClone(proxy.$fieldfList.FieldList),
  ...proxy.$fn.deepClone(obj),
})

onMounted(() => {
  getCustomize()
})

// 关闭弹窗前的回调
function handleClose() {
  shows.value = false
  emit('reset')
}
function getCustomize() {
  let param = { tableKey: props.tableKey }
  getCustomizeSetting(param).then((res) => {
    if (res && res.success) {
      let data = res.data
      filterInfo.value.query.customizeUserVO = data
      tableInfo.value.fieldList = proxy.$fn.setFieldList(
        tableInfo.value.fieldList,
        data.detail
      )
      tableInfo.value.fieldList.forEach((item) => {
        if (item.value === 'storeBatchNumber') {
          item['type'] = 'slot'
        }
      })
      if (props.info && JSON.stringify(props.info) !== '{}') {
        filterInfo.value.query.queryMap.id.value = props.ids
        filterInfo.value.query.queryMap.orderId.value = props.orderId
        filterInfo.value.query.queryMap.isConsignBusiness.value =
          props.isConsignBusiness
      }
      getList()
    }
  })
}
function getList() {
  props.api(filterInfo.value.query).then((resp) => {
    if (resp && resp.success && resp.data.length) {
      tableInfo.value.data = resp.data
    }
  })
}
</script>

<style scoped lang="scss">
:deep(.filter-item) {
  width: 100%;
}
.text-style {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scan-groups {
  display: flex !important;
  align-items: center;
}
</style>
